@import "../../../style/mixins/index.scss";
@import "../../../style/theme/default.scss";

$image-size: 56px;
$item-horizontal-padding: 24px;

@mixin squareImg($size: 56px) {
  width: $size;
  height: $size;

  &-info {
    width: 100%;
    height: 100%;
  }
}

.at-list__item {
 

  padding: $spacing-v-lg $spacing-h-lg;
  position: relative;
  box-sizing: border-box;
  color: $color-text-base;
  font-size: $font-size-lg;
  line-height: $line-height-zh;

  &::after {
    content: " ";
    position: absolute;
    width: calc(100% - #{$spacing-h-lg});

    /* prettier-ignore */
    height: 1PX;
    background-color: $color-border-lighter;
    bottom: 0;
    left: $spacing-h-lg;
  }

  &--thumb {
    .item-thumb {
      margin-right: $item-horizontal-padding;
      @include squareImg($image-size);
    }
  }

  &--disabled {
    opacity: $opacity-disabled;

    &:active {
      background-color: transparent !important;
    }
  }

  &--no-border::after {
    content: initial;
  }

  &-content {
     
    overflow: visible;
    margin-right: 40px;
  }

  &-extra {
    @include flex(0, 0, 235px);

    text-align: right;
  }
}

.at-list__item .item-content {
  &__info {
    &-title {
       
      color: inherit;
      font-size: inherit;
      line-height: $line-height-zh;
    }

    &-note {
      color: $color-grey-2;
      font-size: $font-size-base;
      line-height: $line-height-zh;
    }
  }
}

.at-list__item .item-extra {
  &__info,
  &__icon,
  &__image,
  &__switch {
    display: inline-block;
  }

  &__info {
     
    color: $color-grey-2;
    max-width: 160px;
    font-size: $font-size-lg;
    vertical-align: middle;
  }

  &__icon {
    margin-left: $spacing-h-sm;
    margin-right: -$spacing-h-sm;
  }

  &__switch {
    vertical-align: middle;
  }

  &__image {
    @include squareImg($image-size);

    vertical-align: middle;
  }
}
